<template>
<div>


  <div style="padding: 10px 0">
    <el-input style="width: 250px" placeholder="请输入群组名称" :suffix-icon="Search" v-model="searchname"></el-input>

    <el-button type="primary" style="margin-left: 5px" @click="search()">
      <el-icon style="vertical-align: middle;">
        <search />
      </el-icon>
      <span style="vertical-align: middle;"> 搜索 </span>
    </el-button>
    <el-button @click="creat()"  size="default" type="primary" style="margin-right: 5px">新建群组<el-icon><danger/></el-icon></el-button>
  </div>



<!--  </el-table>-->

  <el-table :data="tableData" border style="width: 100%" >

        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <el-table :data="props.row.users"  >

                  <el-table-column label="用户名称 " prop="username" />
                  <el-table-column label="用户电话" prop="phone" />


                <el-table-column fixed="right" label="操作" width="370"  align="center">
                  <template v-slot="scope">
                    <el-button @click="deleteUser(scope.row.username)"  size="default" type="danger">删除</el-button>
                  </template>
                </el-table-column>

               </el-table>

            </div>
          </template>
      </el-table-column>

    <el-table-column label="群组ID" prop="id" />
    <el-table-column label="群组名称" prop="name" />
    <el-table-column label="群组描述" prop="description" />
    <el-table-column label="群组状态" prop="state" />

    <el-table-column fixed="right" label="操作" width="370"  align="center">
      <template v-slot="scope">
        <el-button @click="edit(scope.row.id)"  size="default" type="primary">编辑群组<el-icon><check/></el-icon></el-button>
        <el-button @click="deleteGroup(scope.row.id)"  size="default" type="danger">删除群组<el-icon><danger/></el-icon></el-button>
      </template>

    </el-table-column>




  </el-table>


  <el-pagination @size-change="sizeChange" @current-change="currentChange"
                 :current-page="page" :page-size="size" :page-sizes="pageSizes"
                 layout="total,sizes,prev,pager,next，jumper" :total="total">

  </el-pagination>


</div>
</template>

<script>
import {ElMessage} from "element-plus";

import GLOBAL from '@/api/global_variable'


export default {
  name: "userGroup",
  data(){
    return{
      tableData: '',
      page: '1',
      size: 10,
      total: '',
      allData: '',
      searchname: '',
      testid: '',
      id: GLOBAL.userGruId,
    }
  },
  methods:{
    load(){
      this.$http.post("group/usergroupAll").then(res => {
        if (res.statusCode == '200') {
          ElMessage({
            message: '群组信息获取成功',
            type: 'success',
          })
          this.allData=res.data.groups
          this.getTableData()
        } else {
          ElMessage.error('获取失败！')
        }
      }).catch(() => {
        ElMessage.error('获取失败！')
      })
    },
    click(data){
      console.log(data)
    },

    currentChange(val){
      this.page=val
      this.getTableData()
    },
    sizeChange(val){
      this.size=val
      this.page=1
      this.getTableData()
    },
    getTableData(){
      this.tableData=this.allData.slice(
          (this.page-1)*this.size,
          this.page*this.size
      )
      this.total=this.allData.length

    },
    search(){
      this.getTableData()
      let text = this.searchname
      let reg = new RegExp(text) //声明正则变量
      this.tableData = this.tableData.filter(item => reg.test(item.name)) //返回
    },
    deleteGroup(id){
      this.$http.post("/group/deleteusergroup",id).then(res=>{
        if(res.statusCode == '200'){
          this.allData=res.data.groups
          this.getTableData()
          ElMessage({
            message: '删除成功！',
            type: 'success',
          })
        }else {
          ElMessage.error('删除失败！')
        }
      }).catch(()=>{
        ElMessage.error('删除失败！')
      })
    },
    edit(id){
      GLOBAL.userGruId=id
    this.$router.push("/userGruChan")
},
    creat(){
      this.$router.push("/creatUserGroup")
    },
    deleteUser(username)
{
  this.$http.post("/user/deleteusergroup",username).then(res=>{
    if(res.statusCode == '200'){
      this.load()
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
    }else {
      ElMessage.error('删除失败！')
    }
  }).catch(()=>{
    ElMessage.error('删除失败！')
  })
}
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>

</style>
